<template>
	<view class="user-manage">
		<text class="page-title">用户管理</text>
		<!-- 用户列表 -->
		<view class="user-list">
			<view 
				class="user-item" 
				v-for="user in userList" 
				:key="user.id"
			>
				<image class="user-avatar" :src="user.avatar" mode="aspectFill" />
				<view class="user-info">
					<text class="user-name">{{ user.name }}</text>
					<text class="user-email">{{ user.email }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, onMounted, onActivated, onDeactivated } from 'vue';
import api from '@/api';

// ------------------------------ 类型定义 ------------------------------
/** 用户项数据结构 */
interface UserItem {
  id: number;         // 用户ID
  name: string;       // 用户名
  email: string;      // 邮箱
  avatar: string;     // 头像路径
}

// ------------------------------ 响应式数据 ------------------------------
/** 用户列表（响应式数组） */
const userList = reactive<UserItem[]>([
  { 
    id: 1, 
    name: '张三', 
    email: 'zhangsan@example.com', 
    avatar: '/static/avatar1.png' 
  },
  { 
    id: 2, 
    name: '李四', 
    email: 'lisi@example.com', 
    avatar: '/static/avatar2.png' 
  },
  { 
    id: 3, 
    name: '王五', 
    email: 'wangwu@example.com', 
    avatar: '/static/avatar3.png' 
  }
]);


// ------------------------------ 生命周期 ------------------------------
/** 页面加载时执行 */
onMounted(() => {
  console.log('用户管理页加载，当前导航 ID：user');
});

/** 组件激活时执行（keep-alive 缓存后进入） */
onActivated(() => {
  console.log('用户管理页激活（进入）');
});

/** 组件失活时执行（keep-alive 缓存后离开） */
onDeactivated(() => {
  console.log('用户管理页失活（离开）');
});
</script>

<style scoped>
.user-manage {
  height: 100%;
  padding: 24px; /* 可选：增加内边距避免内容贴边 */
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #2c3e50;
}

.user-list {
  display: grid;
  gap: 16px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 轻微阴影提升层次感 */
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover; /* 确保头像比例正确（uni-app mode="aspectFill" 已处理） */
}

.user-info {
  flex: 1; /* 占据剩余空间，让邮箱左对齐 */
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 16px;
  color: #34495e;
  margin-bottom: 4px;
}

.user-email {
  font-size: 14px;
  color: #7f8c8d;
  overflow: hidden; /* 避免长邮箱溢出 */
  text-overflow: ellipsis; /* 长邮箱显示省略号 */
  white-space: nowrap; /* 邮箱不换行 */
}
</style>